<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>fangbing</title>
<link href="/res/css/bootstrap.css" rel="stylesheet">
<link href="/res/css/metisMenu.css" rel="stylesheet">
<link href="/res/css/fullcalendar.css" rel="stylesheet">
<link href="/res/css/jquery-ui.css" rel="stylesheet">
<link href="/res/css/sb-admin-2.css" rel="stylesheet">
<link href="/res/css/font-awesome.css" rel="stylesheet">

<script src="/res/js/moment.js"></script>
<script src="/res/js/jquery-2.1.4.js"></script>
<script src="/res/js/bootstrap.js"></script>
<script src="/res/js/jquery-ui.js"></script>
<script src="/res/js/fullcalendar.js"></script>
<script src="/res/js/metisMenu.js"></script>
<script src="/res/js/sb-admin-2.js"></script>
<script>
	$(document).ready(
			function() {
				$('#calendar')
						.fullCalendar(
								{
									header : {
										left : 'prev,next today',
										center : 'title',
										right : 'month,agendaWeek,agendaDay'
									},
									defaultDate: new Date(),//new Date()
									businessHours : true, // display business hours
									editable : true,
									titleFormat : {
										month : 'YYYY年MMM',
										week : 'YYYY年MMM D日',
										day : ' YYYY年 MMM D日，dddd'
									},
									monthNames : [ "1月", "2月", "3月", "4月",
											"5月", "6月", "7月", "8月", "9月",
											"10月", "11月", "12月" ],
									monthNamesShort : [ "1月", "2月", "3月", "4月",
											"5月", "6月", "7月", "8月", "9月",
											"10月", "11月", "12月" ],
									dayNames : [ "周日", "周一", "周二", "周三", "周四",
											"周五", "周六" ],
									dayNamesShort : [ "周日", "周一", "周二", "周三",
											"周四", "周五", "周六" ],
									today : [ "今天" ],
									allDayText : '全天',
									buttonText : {
										today : '今天',
										month : '月',
										week : '周',
										day : '日'
									},
									events : 
										function(start,end,timezone,callback) {
												$.ajax({
															type : "post",
															dataType : "json",
															data: {
																start: start.format(),
																end: end.format()
															},
															url : "/menstruation/getMenstruationBaseInfo.do",
															success : function(data) {
																var events = [];
																$(data).each(function(){
																	events.push({
																		start:$(this).attr('start'),
																		end:$(this).attr('end'),
																		title:$(this).attr('title'),
																		color:$(this).attr('color')
																	});
																});
																callback(events);
															}
														});
											},

											/*[ {
										title : 'Business Lunch',
										start : '2015-07-19',
										end : '2015-07-19',
										color : '#FF8800'
										}]
										{
										title : 'Meeting',
										start : '2015-02-13T11:00:00',
										constraint : 'availableForMeeting', // defined below
										color : '#257e4a'
										}, {
										title : 'Conference',
										start : '2015-02-18',
										end : '2015-02-20'
										}, {
										title : 'Party',
										start : '2015-02-29T20:00:00'
										},

										// areas where "Meeting" must be dropped
										{
										id : 'availableForMeeting',
										start : '2015-02-11T10:00:00',
										end : '2015-02-11T16:00:00',
										rendering : 'background'
										}, {
										id : 'availableForMeeting',
										start : '2015-02-13T10:00:00',
										end : '2015-02-13T16:00:00',
										rendering : 'background'
										},

										// red areas where no events can be dropped
										{
										start : '2015-02-24',
										end : '2015-02-28',
										overlap : false,
										rendering : 'background',
										color : '#ff9f89'
										}, {
										start : '2015-02-06',
										end : '2015-02-08',
										overlap : false,
										rendering : 'background',
										color : '#ff9f89'
										} ]*/
										});

					});
</script>
<style>
body {
	margin: 40px 10px;
	padding: 0;
	font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
}

#calendar {
	max-width: 900px;
	margin: 0 auto;
}
</style>
</head>
<body>
	<div id='calendar'></div>
</body>
</html>
